@import './Mixins.less';
@import '~antd/lib/style/themes/default.less';

.title_icon {
    font-size   : 12px;
    margin-right: 5px;
}
.container{
    overflow-x: auto;
    text-align: center;
    &_wrap{
        margin-top: 35px;
        display: inline-block;
        transform-origin: 50% 0 0;
        cursor: move;
    }
    .zoom {
        display          : flex;
        position         : absolute;
        -webkit-box-align: center;
        -ms-flex-align   : center;
        align-items      : center;
        -webkit-box-pack : justify;
        -ms-flex-pack    : justify;
        justify-content  : space-between;
        height           : 40px;
        width            : 125px;
        right            : 40px;
        z-index          : 10;
    
        .text {
            margin        : 0;
            padding       : 0;
            border        : 0;
            outline       : 0;
            font-size     : 100%;
            font          : inherit;
            vertical-align: baseline;
        }
    }
}

.end_node {
    border-radius: 50%;
    font-size    : 14px;
    color        : rgba(25, 31, 37, .4);
    text-align   : left;

    .end_node_circle {
        width        : 10px;
        height       : 10px;
        margin       : auto;
        border-radius: 50%;
        background   : #dbdcdc;
    }

    .end_node_text {
        margin-top: 5px;
        text-align: center;
    }
}

.node_wrap {
    display          : inline-flex;
    width            : 100%;
    flex-direction   : column;
    -webkit-box-pack : start;
    -ms-flex-pack    : start;
    justify-content  : flex-start;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    -ms-flex-wrap    : wrap;
    flex-wrap        : wrap;
    -webkit-box-flex : 1;
    -ms-flex-positive: 1;
    padding          : 0 50px;
    position         : relative;

    .node_wrap_box {
        display              : -webkit-inline-box;
        display              : -ms-inline-flexbox;
        display              : inline-flex;
        -webkit-box-orient   : vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction   : column;
        flex-direction       : column;
        position             : relative;
        width                : 220px;
        min-height           : 72px;
        -ms-flex-negative    : 0;
        flex-shrink          : 0;
        background           : #fff;
        border-radius        : 4px;
        cursor               : pointer;

        &::after {
            pointer-events: none;
            content       : "";
            position      : absolute;
            top           : 0;
            bottom        : 0;
            left          : 0;
            right         : 0;
            z-index       : 2;
            border-radius : 4px;
            border        : 1px solid transparent;
            transition    : all .1s cubic-bezier(.645, .045, .355, 1);
            box-shadow    : 0 2px 5px 0 rgba(0, 0, 0, .1);
        }

        &:hover .close {
            display   : none;
            // display: block;
        }

        &:hover::after {
            // border    : 1px solid @primary-color;
            box-shadow   : 0 0 6px 0 rgba(50, 150, 250, .3);
        }

        &::before {
            content          : "";
            position         : absolute;
            top              : -12px;
            left             : 50%;
            -webkit-transform: translateX(-50%);
            transform        : translateX(-50%);
            width            : 0;
            height           : 4px;
            border-style     : solid;
            border-width     : 8px 6px 4px;
            border-color     : #E5E5E5 transparent transparent;
            background       : #fff;
        }

        .title {
            position     : relative;
            padding-left : 16px;
            padding-right: 30px;
            width        : 100%;
            height       : 32px;
            line-height  : 32px;
            font-size    : 12px;
            color        : #fff;
            text-align   : left;
            background   : #576a95;
            border-radius: 4px 4px 0 0;
            overflow     : hidden;
            white-space  : nowrap;
            text-overflow: ellipsis;
        }

        .close {
            display      : none;
            position     : absolute;
            right        : 10px;
            top          : 50%;
            transform    : translateY(-50%);
            width        : 20px;
            height       : 20px;
            font-size    : 14px;
            color        : #fff;
            border-radius: 50%;
            text-align   : center;
            line-height  : 20px;
        }

        .content {
            position     : relative;
            font-size    : 14px;
            padding      : 16px;
            padding-right: 30px;
        }

        .text {
            overflow          : hidden;
            text-overflow     : ellipsis;
            display           : -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
}

.branch_wrap {
    display   : inline-flex;
    // width  : 100%;

    .branch_box_wrap {
        display                 : flex;
        -webkit-box-orient      : vertical;
        -webkit-box-direction   : normal;
        flex-direction          : column;
        flex-wrap               : wrap;
        -webkit-box-align       : center;
        align-items             : center;
        min-height              : 270px;
        // width                : 100%;
        flex-shrink             : 0;
    }

    .branch_box {
        display      : flex;
        overflow     : visible;
        min-height   : 180px;
        height       : auto;
        border-bottom: 2px solid #E5E5E5;
        border-top   : 2px solid #E5E5E5;
        position     : relative;
        margin-top   : 15px;

        .col_box {
            // background           : #f5f5f7;
            display                 : inline-flex;
            -webkit-box-orient      : vertical;
            -webkit-box-direction   : normal;
            flex-direction          : column;
            -webkit-box-align       : center;
            align-items             : center;
            position                : relative;

            background-color: #fff;

            &::before {
                content         : "";
                position        : absolute;
                top             : 0;
                left            : 0;
                right           : 0;
                bottom          : 0;
                z-index         : 0;
                margin          : auto;
                width           : 2px;
                height          : 100%;
                background-color: #e5e5e5;
                ;
            }

            .top_left_cover_line {
                .top_cover_line();
                left: -1px
            }

            .bottom_left_cover_line {
                .bottom_cover_line();
                left: -1px;
            }

            .top_right_cover_line {
                .top_cover_line();
                right: -1px
            }

            .bottom_right_cover_line {
                .bottom_cover_line();
                right: -1px;
            }

            .condition_node,
            .condition_node_box {
                display              : inline-flex;
                -webkit-box-orient   : vertical;
                -webkit-box-direction: normal;
                flex-direction       : column;
                -webkit-box-flex     : 1;
            }

            .condition_node_box {
                padding-top      : 30px;
                padding-right    : 50px;
                padding-left     : 50px;
                -webkit-box-pack : center;
                justify-content  : center;
                -webkit-box-align: center;
                align-items      : center;
                flex-grow        : 1;
                position         : relative;
            }

            .auto_judge {
                position     : relative;
                width        : 220px;
                min-height   : 72px;
                background   : #fff;
                border-radius: 4px;
                box-shadow   : 0 0 5px 0 rgba(0, 0, 0, 0.1);
                cursor       : pointer;

                &:hover {
                    // border : 1px solid @primary-color;
                    box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3);
                }

                .title_wrapper {
                    position   : relative;
                    display: flex;
                    align-items: center;
                    font-size  : 12px;
                    color      : #FFA22D;
                    text-align : left;
                    line-height: 32px;
                    padding: 0 16px;
                    height: 32px;
                    border-bottom: 1px solid rgba(0,0,0,0.08);
                    >span{
                        .ellipsis();
                        display: inline-block;
                        width: 100%;
                    }
                }

                .content {
                    font-size         : 14px;
                    color             : #191f25;
                    text-align        : left;
                    padding: 16px;
                    padding-right: 30px;
                    overflow          : hidden;
                    text-overflow     : ellipsis;
                    display           : -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}

.add_branch {
    position        : absolute;
    top             : -16px;
    left            : 50%;
    transform       : translateX(-47%);
    transform-origin: center center;
    z-index         : 1;
}


.add_node_btn_box {
    width           : 240px;
    display         : inline-flex;
    flex-shrink     : 0;
    -webkit-box-flex: 1;
    position        : relative;

    &::before {
        content         : "";
        position        : absolute;
        top             : 0;
        left            : 0;
        right           : 0;
        bottom          : -1px;
        z-index         : auto;
        margin          : auto;
        width           : 2px;
        height          : 100%;
        background-color: #E5E5E5;
    }
}

.add_node_btn {
    user-select     : none;
    width           : 240px;
    padding         : 20px 0 32px;
    display         : flex;
    -webkit-box-pack: center;
    justify-content : center;
    flex-shrink     : 0;
    -webkit-box-flex: 1;
    flex-grow       : 1;
}

.start_node.node_wrap_box .content .text {
    display    : block;
    white-space: nowrap
}

.node_wrap_box.start_node::before {
    content: none
}

